<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'shift.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @current-change="clickShift" @editItem="editItem"
      @deleteItem="deleteItem"></z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <div v-if="selectedShift && selectedShift.id" style="margin-top: 30px; font-size: 12px; border: 1px solid #e4e4e4"
      v-loading="shiftItemTableLoading">
      <div class="flex" style="padding: 10px; border-bottom: 1px solid #e4e4e4; align-items: center">
        <label style="color: #909399">{{ selectedShift.shift_name }}</label>
        <label style="margin-left: 20px">当前设置课时：</label>
        <el-input-number style="width: 100px" v-model="itemListLength" :min="0" :max="24" :disabled="!editModel"
          @change="changeItemListLength"></el-input-number>
        <label>&nbsp;节</label>
        <div class="flex1"></div>
        <el-button type="default" v-if="!editModel" @click="editModel = true">调整</el-button>
        <el-button type="warning" v-if="editModel" @click="cancelsubmitItem">取消</el-button>
        <el-button type="primary" v-if="editModel" :loading="submitLoading" @click="submitItem">保存</el-button>
      </div>
      <el-row :gutter="30">
        <el-col :span="12" v-for="(item, index) in itemList" :key="index">
          <div class="flex" style="align-items: center; font-size: 14px; padding: 5px 10px">
            <div>第{{ item.shift_item }}节课</div>
            <div style="margin-left: 20px">{{ item.start_time }}&nbsp;~&nbsp;{{ item.end_time }}</div>
            <el-slider style="margin-left: 20px; width: 80px" v-model="item.item_hours" :min="0" :max="4"
              :disabled="!editModel" :step="0.5" @change="calItemList"></el-slider>
            <div v-if="!editModel" style="margin-left: 20px">{{ item.item_hours }}小时</div>
            <el-input-number v-else style="margin-left: 20px; width: 60px" v-model="item.item_hours" size="mini"
              :controls="false" :min="0" :max="24">
            </el-input-number>
            <div v-if="editModel" style="margin-left: 5px">小时</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>
<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'shift',
  data: function () {
    return {
      api: this.$api.shift,
      name: '班制',
      columns: [
        { title: '班制名称', key: 'shift_name' },
        { title: '开始时间', key: 'start_time' },
        { title: '结束时间', key: 'end_time' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: '班制名称', key: 'shift_name' },
        {
          title: '开始时间',
          key: 'start_time',
          name: 'time',
          props: {
            pickerOptions: { start: '00:00', step: '00:30', end: '23:30' },
            format: 'HH:mm',
            valueFormat: 'HH:mm',
          },
        },
        {
          title: '结束时间',
          key: 'end_time',
          name: 'time',
          props: {
            pickerOptions: { start: '00:00', step: '00:30', end: '23:30' },
            format: 'HH:mm',
            valueFormat: 'HH:mm',
          },
        },
      ],
      tableProps: {
        border: true,
        highlightCurrentRow: true,
      },
      shiftItemTableLoading: false,
      plantList: [],
      itemList: [],
      selectedShift: {},
      itemListLength: 0,
      editModel: false,
    }
  },
  methods: {
    clickShift(row) {
      this.selectedShift = row
      if (row) this.getShiftItem()
    },
    getShiftItem() {
      this.editModel = false
      this.shiftItemTableLoading = true
      this.itemListLength = 0
      this.$request(this.api + 'getitembyid/', { id: this.selectedShift.id })
        .then((r) => {
          this.shiftItemTableLoading = false
          this.itemList = r
          this.itemListLength = this.itemList.length
        })
        .catch(() => {
          this.shiftItemTableLoading = false
        })
    },
    submitItem() {
      this.submitLoading = true
      if (this.itemList.length <= 0) {
        this.$message({ message: '无课时数据', type: 'error' })
        this.submitLoading = false
        return
      }
      if (this.itemList[this.itemList.length - 1].end_time != this.selectedShift.end_time) {
        this.$message({ message: '最后一节课的结束时间与班制的结束时间不一致！', type: 'error' })
        this.submitLoading = false
        return
      }
      this.$request(this.api + 'additem/', this.itemList, 'post')
        .then(() => {
          this.$message({ message: '操作成功', type: 'success' })
          this.submitLoading = false
          this.editModel = false
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    cancelsubmitItem() {
      this.editModel = false
      this.getShiftItem()
    },
    changeItemListLength(v) {
      let i = v - this.itemList.length
      if (i < 0) {
        this.itemList.splice(v)
      } else if (i > 0) {
        for (let j = 0; j < i; j++) {
          this.itemList.push({})
        }
      }
      this.calItemList()
    },
    calItemList() {
      let tmpArr = []
      let tmp = {}
      this.itemList.forEach((v, i) => {
        tmp = { ...v }
        if (i == 0) {
          tmp.start_time = this.selectedShift.start_time
        } else {
          tmp.start_time = tmpArr[i - 1].end_time
        }
        if (!tmp.item_hours) {
          tmp.item_hours = 1
        }
        tmp.end_time = this.addHour(tmp.start_time, tmp.item_hours)
        tmp.shift_id = this.selectedShift.id
        tmp.shift_item = i + 1
        tmpArr.push(tmp)
      })
      this.itemList = tmpArr
    },
    addHour(timeStr, hours = 0) {
      if (!timeStr) return ''
      let hour = timeStr.substr(0, 2) * 1
      let minute = timeStr.substr(3, 2) * 1
      let add_hour = parseInt(hours)
      let add_minute = (hours - add_hour) * 60
      minute = minute + parseInt(add_minute)
      if (minute >= 60) {
        minute = minute - 60
        hour = hour + 1
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      hour = hour + add_hour
      hour = hour >= 24 ? hour - 24 : hour
      if (hour < 10) {
        hour = '0' + hour
      }
      return hour + ':' + minute
    },
  },
  created: function () {
    this.getList()
  },
}
</script>
<style scoped>
</style>
